import React, { Component } from 'react'
import DataStore from '../expand/dao/DataStore'
import { StyleSheet, View, Text, TextInput } from 'react-native'

export default class DataStoreDemoPage extends Component {
	constructor(props) {
		super(props)
		this.state = {
			showText: ''
		}
		this.dataStore = new DataStore()
	}

	loadData() {
		let url = `https://api.github.com/search/repositories?q=${this.searchKey}`
		this.dataStore
			.fetchData(url)
			.then(data => {
				let showData = `初次数据加载时间:${new Date(
					data.timestamp
				)}\n${JSON.stringify(data.data)}`
				this.setState({
					showText: showData
				})
			})
			.catch(error => {
				error && console.log(error.toString())
			})
	}

	render() {
		return (
			<View style={styles.container}>
				<Text style={styles.welcome}>离线缓存框架设计</Text>
				<View style={styles.input_container}>
					<TextInput
						style={styles.input}
						onChangeText={text => {
							this.searchKey = text
						}}
					/>
					<Text
						onPress={() => {
							this.loadData()
						}}
					>
						获取
					</Text>
				</View>
				<Text>{this.state.showText}</Text>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#f5fcff'
	},
	welcome: {
		fontSize: 16,
		textAlign: 'center'
	},
	input_container: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	input: {
		height: 30,
		flex: 0.9,
		borderColor: 'black',
		borderWidth: 1
	}
})
